<template>
    <div :id="id">
        <div class="timeing" v-if="mode === 1">
        </div>
    </div>
</template>
<script>
import register from '@/js/main/register.js';
import bus from '@/js/event/bus.js';

export default {
    props: {
        element: {
            type: Object
        },
        id: {
            type: String
        },
        pageList: {
            require: true,
            type: Array
        },
        mode: {
            type: Number
        }
    },
    data() {
        return {
            eventTimer: null
        };
    },
    created() {
        let _this = this;
        register.addComponent(this);
        if (this.mode === 2) {
            if (this.element.event.length) {
                if (this.eventTimer) {
                    window.clearTimeout(this.eventTimer);
                }
                this.eventTimer = window.setInterval(function() {
                    bus.elementMouseEvent(_this.element, 'timer');
                }, this.element.event[0].interval);
            }
        }
    },
    methods: {},
    destroyed() {
        register.removeComponent(this);
        if (this.eventTimer) {
            window.clearTimeout(this.eventTimer);
        }
    }
};
</script>

<style lang='scss' scoped>
.timeing {
    background: #1a1f32cc;
    background-image: url('../../../src/image/main/toolbar/icon_pop_timeing.svg');
    background-size: 100% 100%;
    position: absolute;
    width: 100%;
    height: 100%;
}
</style>